<template>
  <div class="generator-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>代码生成</span>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
      </template>

      <el-table :data="tableList" style="width: 100%">
        <el-table-column prop="tableName" label="表名称" />
        <el-table-column prop="tableComment" label="表描述" />
        <el-table-column prop="className" label="实体类名称" />
        <el-table-column prop="moduleName" label="生成模块名" />
        <el-table-column prop="businessName" label="生成业务名" />
        <el-table-column prop="functionName" label="生成功能名" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="primary" link @click="handleGenerate(scope.row)">
              生成代码
            </el-button>
            <el-button type="danger" link @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增代码生成' : '编辑代码生成'"
      width="800px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="表名称" prop="tableName">
          <el-input v-model="form.tableName" placeholder="请输入表名称" />
        </el-form-item>
        <el-form-item label="表描述" prop="tableComment">
          <el-input v-model="form.tableComment" placeholder="请输入表描述" />
        </el-form-item>
        <el-form-item label="实体类名称" prop="className">
          <el-input v-model="form.className" placeholder="请输入实体类名称" />
        </el-form-item>
        <el-form-item label="生成模块名" prop="moduleName">
          <el-input v-model="form.moduleName" placeholder="请输入生成模块名" />
        </el-form-item>
        <el-form-item label="生成业务名" prop="businessName">
          <el-input v-model="form.businessName" placeholder="请输入生成业务名" />
        </el-form-item>
        <el-form-item label="生成功能名" prop="functionName">
          <el-input v-model="form.functionName" placeholder="请输入生成功能名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'

// 表格数据
const tableList = ref([])

// 对话框相关
const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const formRef = ref<FormInstance>()

// 表单数据
const form = reactive({
  tableName: '',
  tableComment: '',
  className: '',
  moduleName: '',
  businessName: '',
  functionName: ''
})

// 表单校验规则
const rules = {
  tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
  tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
  className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
  moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
  businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
  functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }]
}

// 新增
const handleAdd = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
  Object.keys(form).forEach(key => {
    form[key] = ''
  })
}

// 编辑
const handleEdit = (row: any) => {
  dialogType.value = 'edit'
  dialogVisible.value = true
  Object.keys(form).forEach(key => {
    form[key] = row[key]
  })
}

// 删除
const handleDelete = (row: any) => {
  // TODO: 实现删除逻辑
}

// 生成代码
const handleGenerate = (row: any) => {
  // TODO: 实现代码生成逻辑
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      // TODO: 实现提交逻辑
      dialogVisible.value = false
    }
  })
}
</script>

<style scoped>
.generator-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 